import { Component } from '@angular/core';
import { trigger, state, transition, style, animate, keyframes } from '@angular/animations';

@Component({
  selector: 'task-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  // animations: [
  //   trigger('square', [
  //     state('green', style({ 'background-color': 'green', 'transform': 'translateY(-100%)' })),
  //     state('red', style({ 'background-color': 'red',  'transform': 'translateY(100%)' })),
  //     transition('green => red', animate('0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275)')),
  //     transition('red => green', animate(2000, keyframes([ // angular关键帧动画
  //       style({transform: 'translateY(100%)'}),
  //       style({transform: 'translateY(98%)'}),
  //       style({transform: 'translateY(95%)'}),
  //       style({transform: 'translateY(90%)'}),
  //       style({transform: 'translateY(80%)'}),
  //       style({transform: 'translateY(60%)'}),
  //       style({transform: 'translateY(30%)'}),
  //       style({transform: 'translateY(0)'}),
  //       style({transform: 'translateY(-10%)'}),
  //       style({transform: 'translateY(-5%)'}),
  //       style({transform: 'translateY(-2%)'}),
  //       style({transform: 'translateY(0)'}),
  //       style({transform: 'translateY(10%)'}),
  //       style({transform: 'translateY(15%)'}),
  //       style({transform: 'translateY(-15%)'}),
  //       style({transform: 'translateY(-45%)'}),
  //       style({transform: 'translateY(-65%)'}),
  //       style({transform: 'translateY(-85%)'}),
  //       style({transform: 'translateY(-95%)'}),
  //       style({transform: 'translateY(100%)'}),
  //     ]))),
  //   ])
  // ]
})
export class AppComponent {
  squareSate: string;
  darkTheme = false;
  switchTheme(dark) {
    this.darkTheme = dark;
  }
  onClick() {
    this.squareSate = this.squareSate === 'red' ? 'green' : 'red';
  }
}
